<template>
    <div class="content">
        <div class="search_header">
            <div class="search_font">
                <!-- <el-icon><Grid /></el-icon> -->
                <Grid style="width: 1em; height: 1em; margin-right: 2px ;"/>
                <text  class="search_font_text"> 服务查询</text>
            </div>
            <div>
                <el-select
                    v-model="formData.category"
                    placeholder="分类"
                    style="width: 240px ;margin-right:10px"
                    clearable
                    >
                    <el-option
                        v-for="item in options"
                        :key="item.OrderNo"
                        :label="item.DicName"
                        :value="item.OrderNo"
                    />
                </el-select>
                <el-input v-model="formData.cateName" style="width: 240px;margin-right:10px" placeholder="名称" />
                <el-button type="primary" :icon="Search" @click="searchList">查询</el-button>
            </div>
        </div>
        <div class="search_result"   v-loading="loading" :element-loading-text="LoadingText">
                <template class="search_content" v-for="(item,index) in classifyListArr" :key="index">
                    <template v-for="(itemOption,indexq) in options" :key="indexq" >
                        <el-tabs  v-if="item.catname == itemOption.OrderNo"  v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                            <el-tab-pane :label="itemOption.DicName" name="first">
                                <el-table :data="item.items" style="width: 100%">
                                    <el-table-column prop="Name" label="名称" width="120" />
                                    <el-table-column prop="Remark" label="备注" width="200" />
                                    <el-table-column prop="" label="文件说明" #default="scopep" width="240">
                                        <span>{{ scopep.row.Creator }}[{{ scopep.row.CreateDate }}]</span>
                                    </el-table-column>
                                    <el-table-column prop="Classify" #default="scope" label="分类" width="120">
                                        <template v-for="(item,index) in options" :key="index" >
                                            <span v-if="item.OrderNo == scope.row.Classify">{{ item.DicName }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column #default="scopeS" label="预览" fixed="right">
                                        <el-icon color="#409efc" @click="downFiles(scopeS.row)" class="no-inherit">
                                            <View />
                                        </el-icon>
                                    </el-table-column>
                                </el-table>
                            </el-tab-pane>
                        </el-tabs>
                    </template>
                </template>
        </div>
    </div>
    
</template>
<script  setup>
    import { ref,onMounted } from 'vue'
    import { TabsPaneContext } from 'element-plus'
    import { Search } from '@element-plus/icons-vue'
    import http from "@/api/http.js";
    const loading = ref(false)
    const LoadingText = ref('Loading...')
    const formData = ref({
        category:'',
        cateName:'',
    })
    const activeName = ref('first')
    const options = ref([]);
    const classifyListArr = ref([])
    const classifyListArrLength = ref(0)
    // 在组件挂载完成后调用查询方法
    onMounted(() => {
        getClassList();
        searchList();
    });
    // tab标签点击事件  暂不用
    const handleClick = (tab, event) => {
        // console.log(tab, event)
    }
    // 查询按钮
    const searchList = (tab, event) => {
        classifyListArr.value = [];
        loading.value = true;
        let wheres = [];
        if (formData.value.category || formData.value.category == 0) {
            wheres.push({ name: 'Classify', value: formData.value.category, displayType: 'select' });
        }
        if (formData.value.cateName) {
            wheres.push({ name: 'Name', value: formData.value.cateName, displayType: 'like' });
        }
        let params = {
            order: 'desc',
            page: 1,
            rows: 100,
            sort: 'CreateDate',
            wheres: JSON.stringify(wheres)
        };
        try {
            http.post('api/q_serve/getPageData',params,true).then(reslut=>{
            
                let classifyList = groupByCategory(reslut.rows, 'Classify');
                if(classifyList.length > 0){
                    for(let i =0;i<classifyList.length;i++){
                        classifyListArr.value.push(classifyList[i]);
                    }
                    classifyListArrLength.value = classifyListArr.value.length;
                    loading.value = false;
                }else{
                    LoadingText.value = "未查询到数据";
                    setTimeout(() => {
                        loading.value = false;
                    }, 3000);
                }
            })
        }catch (error) {
            console.error('查询数据出错:', error);
        }
        
    }
    // 按照分类重组数组
    const groupByCategory = (data, categoryKey) => {
        return Object.values(data.reduce((acc, item) => {
            const category = item[categoryKey];
            if (!acc[category]) {
                acc[category] = {
                    catname: category,
                    items: []
                };
            }
            acc[category].items.push(item);
            return acc;
        }, {}));
    };
    // 预览按钮
    const downFiles = (row) => {
        let httpBaseUrl = http.ipAddress;
        window.open(httpBaseUrl+row.Attachment)
    }
    // 获取分类列表
    const getClassList = () => {
        http.get('api/q_serve_contract/Getfuwufenllei','',true).then(reslut=>{
            options.value = reslut.Sys_DictionaryList;
        })
    }
</script>
  
<style>
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  .content{
    padding:20px;
  }
  .search_header{
    text-align:right;
    display:flex;
    justify-content:space-between;
  }
  .search_result{
    margin-top: 20px;
    width:100%;
    padding-left: 5%;
  }
  .search_font{
    font-size:14px;
    color:'#313131';
    font-weight:bold;
    height:25px;
    border-bottom:3px solid #000;
  }
</style>